<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10过度&动画</title>
    <style>
      /*  显示/隐藏的过度:显示之后和离开之前  */
      .xxx-enter-active,.xxx-leave-active{
        transition: opacity 1s;
      }
      /*隐藏时的样式：显示之前和隐藏之后*/
      .xxx-enter,.xxx-leave-to{
        opacity: 0;
      }

      /*  显示的过度:显示之后  */
      .move-enter-active{
        transition: all 1s;
      }
      /*  隐藏的过度:离开之前  */
      .move-leave-active{
        transition: all 3s;
      }
      /* 隐藏时的样式：显示之前和隐藏之后*/
      .move-enter,.move-leave-to{
        opacity: 0;
        transform: translateX(20px);  /*水平移动,向右移动为正值*/
      }
    </style>
</head>
<body>
<!--
1. vue动画的理解
    操作css的transition或animation，vue会给目标元素添加/移除特定的class
2. 基本过度动画的编码
    1). 在目标元素外包裹<transition name="xxx" >
    2). 定义class样式
      1>. 指定过渡样式：transition
      2>. 指定隐藏时的样式：opacity/其他
3. 过度的类名
    xxx-enter-active：指定显示的transition
    xxx-leave-active：指定隐藏的transition
    xxx-enter：指定隐藏时的样式
-->
<div id="test1">
  <button @click="isShow = !isShow">toggle</button>
  <transition name="xxx">
    <p v-show="isShow" class="xxx-enter-to">hello</p>
  </transition>
</div>

<div id="test2">
  <button @click="isShow = !isShow">toggle</button>
  <transition name="move">
    <p v-show="isShow" class="move-enter-to">hello</p>
  </transition>
</div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el:'#test1',
        data:{
          isShow:true
        }
      });
      new Vue({
        el:'#test2',
        data:{
          isShow:true
        }
      });
    </script>
</body>
</html>
